import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PagesComponent } from './pages.component';
import { HomeChildComponent } from './home/home-child/home-child.component';
import { DetailsComponent } from './details/details.component';
import { HomeChild2Component } from './home/home-child2/home-child2.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'pages',
    pathMatch: 'full'
  },
  {
    path: 'pages',
    component: PagesComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
        outlet: 'pop1',
        children: [
          {
            path: '',
            redirectTo: 'child',
            pathMatch: 'full'
          },{
            path: 'child',
            component: HomeChildComponent
          },{
            path: 'child2',
            component: HomeChild2Component
          },{
            path: '**',
            component: HomeChildComponent
          }
        ]
      },
      {
        path: 'about',
        loadChildren: './about/about.module#AboutModule',
        outlet: 'pop2'
      },
      {
        path: 'details',
        component: DetailsComponent,
        outlet: 'pop1'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }
